<!--
 * @Author: your name
 * @Date: 2021-11-12 10:24:16
 * @LastEditTime: 2021-12-16 16:32:00
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \gwcloud-ui\src\page\wel.vue
-->
<template>
  <div>
    <!-- 顶部 -->
    <div class="banner-text the_top">
      <div class="top_item">
        <div class="fulfilled col_item">
          <div>使用数</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <img src="@/static/svg/icon-gwyonghu.svg">
          </div>
        </div>
        <div class="device col_item">
          <div>设备总数ALL</div>
          <div>23</div>
        </div>
      </div>
      <div class="top_item">
        <div class="fulfilled line col_item">
          <div>在线LINE</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <img src="@/static/svg/icon-gwziyuan.svg">
          </div>
        </div>
        <div class="device col_item">
          <div>离线数</div>
          <div>23</div>
        </div>
      </div>
      <div class="top_item">
        <div class="fulfilled defect col_item">
          <div>故障数</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <img src="@/static/svg/icon-gwguzhangjiluchaxun.svg">
          </div>
        </div>
        <div class="device col_item">
          <div>月故障数</div>
          <div>23</div>
        </div>
      </div>
      <div class="top_item">
        <div class="fulfilled day col_item">
          <div>今日任务</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <img src="@/static/svg/icon-gwrenwu.svg">
          </div>
        </div>
        <div class="device col_item">
          <div>今日已完成</div>
          <div>23</div>
        </div>
      </div>
      <div class="top_item last_top_item">
        <div class="fulfilled attendant col_item">
          <div>维修人员</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <img src="@/static/svg/icon-gwshenfen.svg">
          </div>
        </div>
        <div class="device col_item">
          <div>总人员</div>
          <div>23</div>
        </div>
      </div>
    </div>
    <!-- 报修工单月曲线 -->
    <div class="repairs">
      <div class="repairs_tle">
        报修工单月曲线
        <img class="tle_icon" src="@/static/svg/icon-gwshujufenxi.svg">
      </div>
      <div id="workOrder"></div>
    </div>
    <!-- 设备状态分析 -->
    <div class="dev_stastus">
      <div class="dev_tle">设备状态分析</div>
      <div class="dev_content">
        <div id="equipment"></div>
        <div id="realTime">
          <div class="right-app">
            <div class="right-apptitle">设备实时状态</div>
            <div class="app-zbs">
              <div class="zbs-title">设备总数</div>
              <div class="app-zbs-num">
                <div class="num-title">{{ gateWayApp.list }}</div>
                <div class="num-content">
                  <div class="app-jxz">
                    <i style="color: #27b66a" class="icon-gwdian-yxz"></i>
                    <span>运行中</span>
                    <span>{{ gateWayApp.onlinelist }}</span>
                  </div>
                  <div class="app-jxz">
                    <i style="color: #eb5960" class="icon-gwdian-ytz"></i>
                    <span>已停止</span>
                    <span>{{ gateWayApp.offlinelist }}</span>
                  </div>
                  <div class="app-jxz">
                    <i style="color: #ffb413" class="icon-gwdian-qt"></i>
                    <span>其他</span>
                    <span>{{
                      gateWayApp.list -
                      gateWayApp.onlinelist -
                      gateWayApp.offlinelist
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="gateWayApp.list > 0">
              <div class="zbs-jdt">
                <span class="jdt-jxz" :style="{ width: gateWayApp.online }" />
                <span class="jdt-ytz" :style="{ width: gateWayApp.offline }" />
                <span class="jdt-qt" :style="{ width: gateWayApp.other }" />
              </div>
              <div class="zbs-jsz">
                <span>监视中</span>
                <i class="icon-gwshijian"></i>
                <span>统计时间 2021-08-01 17:23</span>
                <span>1分钟前</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 设备状态/设备完好率/设备利用率排行 -->
    <div class="dev_usage">
      <div class="availability">
        <div class="register-senoud">
          <div class="ratio_date">
            <div class="ratio_title">设备状态<img class="tle_icon" src="@/static/svg/icon-gwbeijianshiyongshuai-copy.svg"></div>
                
          </div>
                 
          <div class="mallapp_content">
            <div class="mallapp_pro">
              <span class="pro_tle availa_tle">正常</span>            
              <el-progress
                :style="'width:70%;'"
                color="#1890FF"
                :text-inside="true"
                :stroke-width="26"
                :percentage="95"
              />  
              <span class="pro_num">95</span>
            </div>
                     
            <div class="mallapp_pro">
              <span class="pro_tle availa_tle">带病运行</span>            
              <el-progress
                color="#E7A23D"
                :style="'width:70%;'"
                :text-inside="true"
                :stroke-width="26"
                :percentage="7"
              />     
              <span class="pro_num">7</span>
            </div>
                     
            <div class="mallapp_pro">
              <span class="pro_tle availa_tle">故障</span>            
              <el-progress
                color="#67C23A"
                :style="'width:70%;'"
                :text-inside="true"
                :stroke-width="26"
                :percentage="10"
              />   
              <span class="pro_num">10</span>
            </div>
                          
          </div>
               
        </div>
      </div>
      <div id="goodCondition"></div>
      <div class="usage">
        <div class="register-senoud">
          <div class="ratio_date">
            <div class="ratio_title">设备利用率排行<img class="tle_icon" src="@/static/svg/icon-gwshujupaihangbang.svg"></div>
                   
          </div>
                 
          <div class="mallapp_content">
                     
            <div class="mallapp_pro">
                         
              <el-progress
                :style="'width:' + 70 / (100 / 50) + '%'"
                color="#1890FF"
                :text-inside="true"
                :stroke-width="26"
                :percentage="50"
              />
                         
              <span class="pro_tle">空压机LJ-100：87%</span>
            </div>
                     
            <div class="mallapp_pro">
                         
              <el-progress
                color="#E7A23D"
                :style="'width:' + 70 / (100 / 20) + '%'"
                :text-inside="true"
                :stroke-width="26"
                :percentage="20"
              />
                         
              <span class="pro_tle">高温摩擦焊接JK093：60%</span>
            </div>
                     
            <div class="mallapp_pro">
                         
              <el-progress
                color="#67C23A"
                :style="'width:' + 70 / (100 / 80) + '%'"
                :text-inside="true"
                :stroke-width="26"
                :percentage="80"
              />
                         
              <span class="pro_tle">马扎克机床l00931：43%</span>
            </div>
                     
            <div class="mallapp_pro">
                         
              <el-progress
                color="#00C0DE"
                :style="'width:' + 70 / (100 / 68) + '%'"
                :text-inside="true"
                :stroke-width="26"
                :percentage="68"
              />
                         
              <span class="pro_tle">三菱机床u0021：43% </span>
            </div>
                     
            <div class="mallapp_pro">
                         
              <el-progress
                color="#101010"
                :style="'width:' + 70 / (100 / 30) + '%'"
                :text-inside="true"
                :stroke-width="26"
                :percentage="30"
              />
                         
              <span class="pro_tle">三菱线切割32sd：43%</span>
            </div>
          </div>
               
        </div>
      </div>
    </div>
    <!-- 即将超期保养任务/即将超期巡检任务 -->
    <div class="immediately">
      <div class="maintain_task">
        <div class="task_tle">即将超期保养任务<img class="tle_icon" src="@/static/svg/icon-gwtask.svg"></div>
        <div class="task_table">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ background: '#f8f8f9', color: '#262626' }"
          >
            <el-table-column prop="date" label="任务编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="计划编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="负责人"> </el-table-column>
            <el-table-column prop="date" label="超时日期"> </el-table-column>
            <el-table-column prop="address" label="所属部门"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="polling_task">
        <div class="task_tle">即将超期保养任务<img class="tle_icon" src="@/static/svg/icon-gwxunjianguiji.svg"></div>
        <div class="task_table">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ background: '#f8f8f9', color: '#262626' }"
          >
            <el-table-column prop="date" label="任务编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="计划编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="负责人"> </el-table-column>
            <el-table-column prop="date" label="超时日期"> </el-table-column>
            <el-table-column prop="address" label="所属部门"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import echarts from "echarts";
import { RepairworkOrder, Servicestatus, Servicerice } from "@/util/echartsAll";
export default {
  name: "Wel",
  data() {
    return {
      activeNames: ["1", "2", "3", "4"],
      DATA: [],
      text: "",
      actor: "",
      count: 0,
      isText: false,
      gateWayApp: {
        msg: "客户页面-获取集团下网关应用数量成功",
        code: 0,
        list: 28,
        offlinelist: 4,
        onlinelist: 14,
        online: "50%",
        offline: "14.285714285714285%",
        other: "35.714285714285715%",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "设备部",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "设备部",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "设备部",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "设备部",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["website"]),
  },
  mounted() {
    this.get();
  },
  methods: {
    getData() {
      if (this.count < this.DATA.length - 1) {
        this.count++;
      } else {
        this.count = 0;
      }
      this.isText = true;
      this.actor = this.DATA[this.count];
    },
    get() {
      const mycharts = echarts.init(document.getElementById("workOrder"));
      RepairworkOrder(mycharts, [], [], []);

      const equipment = echarts.init(document.getElementById("equipment"));
      Servicestatus(equipment, ["1"], [], []);

      const goodCondition = echarts.init(
        document.getElementById("goodCondition")
      );
      Servicerice(goodCondition, ["1"], [], []);
    },
    setData() {
      let num = 0;
      let count = 0;
      let active = false;
      const timeoutstart = 5000;
      const timeoutend = 1000;
      const timespeed = 10;
      setInterval(() => {
        if (this.isText) {
          if (count == this.actor.length) {
            active = true;
          } else {
            active = false;
          }
          if (active) {
            num--;
            this.text = this.actor.substr(0, num);
            if (num == 0) {
              this.isText = false;
              setTimeout(() => {
                count = 0;
                this.getData();
              }, timeoutend);
            }
          } else {
            num++;
            this.text = this.actor.substr(0, num);
            if (num == this.actor.length) {
              this.isText = false;
              setTimeout(() => {
                this.isText = true;
                count = this.actor.length;
              }, timeoutstart);
            }
          }
        }
      }, timespeed);
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.tle_icon{
  width: 24px;
  height: 24px;
  margin-left: 3px;
}
::v-deep .avue-tags {
  display: none !important;
}
@mixin top_icon($color1, $color2) {
  width: 28px;
  height: 22px;
  line-height: 18px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  color: $color1;
  background-color: $color2;
  border: 1px solid $color2;
}

@mixin top_title() {
  
      display: flex;
      align-items: center;
  padding: 8px 0;
  color: #87888a;
  font-size: 14px;
  border-bottom: 1px solid #e6e6ee;
  padding-left: 20px;
  margin-bottom: 12px;
}
.banner-text {
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  background: #fff;
  .top_item {
    width: 20%;
    border-right: 1px solid #e6e6ee;
    padding: 10px 0px 15px 0px;
    box-sizing: border-box;
    .col_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #87888a;
      padding: 0 20px;
      box-sizing: border-box;
      img{
        width: 60px;
        height: 60px;
      }
    }
    .fulfilled {
      font-size: 14px;
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 10px;
      box-sizing: border-box;
      :last-child {
        @include top_icon(#389e0d, #6dbef8);
      }
    }
    .line {
      :last-child {
        @include top_icon(#f284ef, #fbd3f8);
      }
    }
    .day {
      :last-child {
        @include top_icon(#38a980, #adde91);
      }
    }
    .attendant {
      :last-child {
        @include top_icon(#5773e0, #cacaf3);
      }
    }
    .defect {
      :last-child {
        @include top_icon(#ff9502, #ffd59a);
      }
    }
    .number {
      padding: 33px 20px 23px 20px;
      :first-child {
        font-size: 24px;
        color: #282828;
      }
      :last-child {
        font-size: 50px;
      }
    }
    .device {
      font-size: 14px;
      :last-child {
        color: #282828;
      }
    }
  }
  .last_top_item {
    border: none;
  }
}
//
.repairs {
  background: #ffffff;
  margin-top: 20px;
  border-radius: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  .repairs_tle {
    @include top_title;
  }
  #workOrder {
    height: 328px;
    width: 100%;
  }
}
.dev_stastus {
  background: #ffffff;
  margin-top: 20px;
  border-radius: 10px;
  .dev_tle {
    @include top_title;
  }
  .dev_content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 10px;
    #equipment,
    #realTime {
      width: 49%;
      height: 248px;
      .right-app {
        width: 100%;
        margin-top: -12px;
        .right-apptitle {
          width: 100%;
          font-size: 14px;
          color: #87888a;
          line-height: 45px;
          text-align: center;
        }
        .app-zbs {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          .zbs-title {
            width: 100%;
            font-size: 18px;
            color: #aeaeb2;
            border: none;
          }
          .app-zbs-num {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .num-title {
              width: 60%;
              font-size: 28px;
              font-weight: bold;
            }
            .num-content {
              width: 18%;
              font-size: 15px;
              font-weight: 500;
              color: #3a3a3a;
              line-height: 45px;

              div {
                height: 30px;
                display: flex;
                justify-content: space-between;
                padding: 0;
                span {
                  height: 30px;
                  border: none;
                  font-size: 12px;
                  color: #000000;
                }
              }
              .app-jxz {
                background-size: 18px;
                display: flex;
                justify-content: space-between;
              }
            }
          }
        }
        .zbs-jdt {
          margin: 20px 0 14px 0;
          height: 10px;
          padding: 0;
          overflow: hidden;
          display: flex;
          justify-content: space-between;
          border: none;
          .jdt-jxz {
            width: 50%;
            background: #27b66a;
            border-radius: 12px;
          }
          .jdt-ytz {
            width: 30%;
            background: #eb5960;
            border-radius: 12px;
          }
          .jdt-qt {
            width: 20%;
            background: #ffb413;
            border-radius: 12px;
          }
        }
        .zbs-jsz {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 12px;
          .icon-shijian{
            color: red;
          }
          :nth-child(1) {
            color: #27b66a;
          }
          :nth-child(2) {
            font-size: 16px;
            color: #58c68b;
            margin: 0 8px 0 18px;
          }
          :nth-child(3) {
            color: #b6b6b6;
            margin-right: 16px;
          }
          :nth-child(4) {
            color: #b6b6b6;
          }
        }
      }
    }
    #realTime {
      padding-right: 63px;
    }
  }
}
.dev_usage {
  display: flex;
  margin-top: 20px;
  padding: 25px 20px 20px 20px;
  justify-content: space-between;
  width: 100%;
  border-radius: 10px;
  height: 350px;
  background: #ffffff;
  .availability{
    width: 35% !important;
  }
  .availability,
  .usage {
    width: 40%;
    .ratio_title {
      font-size: 16px;
      color: #101010;
      padding-bottom: 20px;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      i{
        font-size: 24px;
      }
    }
    .register-senoud {
      .mallapp_content {
        line-height: 50px;
        box-sizing: border-box;
        ::v-deep .el-progress-bar__outer {
          height: 14px !important;
          background-color: rgba(0, 0, 0, 0);
        }
        ::v-deep .el-progress-bar__innerText {
          display: none;
        }
        ::v-deep .el-progress-bar{
          background: #dce1ec;
  border-radius: 10px;
        }
        .el-progress {
          margin: 10px 0;
        }
        .mallapp_pro {
          display: flex;
          align-items: center;
          .pro_tle {
            font-size: 13px;
            color: #aeaeb2;
            margin-left: 5px;
          }
          .availa_tle{
            width: 10%;
          }
          .pro_num{
            color: #3e4144;
            font-size: 16px;
            margin-left: 10px;
          }
        }
      }
    }
  }
  #goodCondition {
    width: 30%;
    height: 250px;
    margin-top: 10px;
  }
}
.immediately {
  display: flex;
  margin-top: 20px;
  padding: 25px 32px 0px 32px;
  justify-content: space-between;
  width: 100%;
  border-radius: 10px;
  height: 400px;
  background: #ffffff;
  .maintain_task,
  .polling_task {
    width: 48%;
    .task_tle {
      @include top_title;
      border: none;
      padding-left: 0;
      i{
        font-size: 20px;
      }
    }
  }
}
</style>
